<template>
  <div class="moldcontiner">
    <div class="pedal">
      <div class="btn leftkey" tabindex="0" ref="leftBtn">
        <img v-if="!direction.left" src="@/assets/images/pedaloff.png" alt="" />
        <img v-if="direction.left" src="@/assets/images/pedalon.png" alt="" />
      </div>
      <div class="btn rightkey" tabindex="0" ref="rightBtn">
        <img
          v-if="!direction.right"
          src="@/assets/images/pedaloff.png"
          alt=""
        />
        <img v-if="direction.right" src="@/assets/images/pedalon.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    pedalX: {
      type: String,
      default: () => "1",
    },
  },
  data() {
    return {
      direction: {
        left: false,
        right: false,
      },
      directionPosition: {
        left: "0",
        right: "0",
      },
    };
  },
  watch: {
    pedalX(newVal, oldVal) {
      if (newVal < 0) {
        console.log("左高:", newVal);
        this.direction.left = true;
        this.direction.right = false;
        this.directionPosition.left = parseFloat(newVal) * 90;
        this.directionPosition.left = Math.max(
          -90,
          this.directionPosition.left
        );
        console.log("this.directionPosition.left", this.directionPosition.left);
        document.documentElement.style.setProperty(
          "--yoke-left",
          `${this.directionPosition.left}deg`
        );
        // document.documentElement.style.setProperty(
        //   "--yoke-right",
        //   `${this.directionPosition.right}deg`
        // );
        // this.$refs.leftBtn.classList.add("up");
        // this.$refs.rightBtn.classList.remove("up");
        // this.$refs.leftBtn.classList.remove("down");
        // this.$refs.rightBtn.classList.add("down");
      } else if (newVal == 0) {
        this.direction.left = false;
        this.direction.right = false;
      } else if (newVal > 0) {
        console.log("右高:", newVal);
        this.direction.left = false;
        this.direction.right = true;
        // this.$refs.rightBtn.classList.add("up");
        // this.$refs.leftBtn.classList.remove("up");
        // this.$refs.leftBtn.classList.add("down");
        // this.$refs.rightBtn.classList.remove("down");
      }
    },
  },

  methods: {
    handleKeyDown(event) {
      switch (event.key) {
        case "ArrowLeft":
          this.direction.left = true;
          this.$refs.leftBtn.classList.add("up");
          this.$refs.rightBtn.classList.add("down");
          break;
        case "ArrowRight":
          this.direction.right = true;
          this.$refs.leftBtn.classList.add("down");
          this.$refs.rightBtn.classList.add("up");
          break;
      }
    },
    handleKeyUp(event) {
      switch (event.key) {
        case "ArrowLeft":
          this.direction.left = false;
          this.$refs.leftBtn.classList.remove("up");
          this.$refs.rightBtn.classList.remove("down");
          break;
        case "ArrowRight":
          this.direction.right = false;
          this.$refs.leftBtn.classList.remove("down");
          this.$refs.rightBtn.classList.remove("up");
          break;
      }
    },
    handlebtnKeyDown(event) {
      this.handleKeyDown(event);
    },
    handlebtnKeyUp(event) {
      this.handleKeyUp(event);
    },
  },
};
</script>

<style scoped lang="scss">
.moldcontiner {
  width: 200px;
  height: 200px;
  border-radius: 12px;
  box-shadow: inset 2px 2px 12px 2px rgba(31, 114, 148, 0.3);
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  position: relative;
  .pedal {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }
  .btn {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border: none;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    background-color: #606e7d;
    position: absolute;
    font-size: 24px;
    border-radius: 12px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
    &.up {
      transform: translateY(-90%);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }
    &.down {
      transform: translateY(50%);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }
  }
  .leftkey {
    left: 10px;
    top: 50%;
    transform: translateY(var(--yoke-left));
    transition: transform 0.1s ease-in-out;
  }
  .rightkey {
    right: 10px;
    top: 50%;
    transform: translateY(var(--yoke-right));
    transition: transform 0.1s ease-in-out;
    img {
      transform: scaleX(-1);
    }
  }
}
</style>
